 /* rem */
 $htmlfs:15px;

 //  *{
 //     outline: solid #f00 1px !important;
 //     background: #000 !important;
 //     color: green !important;
 // } 
 html {
     font-size: $htmlfs;
 }

 *,
 ::after,
 ::before {
     box-sizing: border-box;
 }

 .iconfont {
     font-family: "iconfont" !important;
     font-size: 20px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 .container {
     position: relative;
     margin: 0 auto;
 }

 .content {
     margin-bottom: -50px;
 }

 .bg-light {
     background-color: #f7faff !important;
 }

 // 深色背景图
 .bg-dark {
     background-color: #21325b !important;

 }

 .text-white {

     margin-left: 30px;
     color: #fff !important;
 }

 // 面包屑导航
 .breadcrumb {
     margin: 40px 30px;
     background-color: transparent!important;
     color: #fff;
 }
 .breadcrumb>.active {
    color: #fff!important; 
}
 .breadcrumb>li+li:before {
     padding: 0 5px;
     color: #ccc;
     content: "/\00a0";
 }

 .breadcrumb-light .breadcrumb-item {
     color: #fff;
 }

 .breadcrumb-no-gutter {
     padding: 0;
 }

 .col-auto {
     flex: 0 0 auto;
     width: auto;
     max-width: 100%;
 }

 // 退出登录
 .logout {
     position: absolute;
     right: 20px;
     top: 30%;
 }

 .btn:not(:disabled):not(.disabled) {
     cursor: pointer;
 }

 .btn-soft-light {
     color: #f7faff;
     background-color: rgba(247, 250, 255, .1);
     border-color: transparent;
 }

 .btn-group-sm>.btn,
 .btn-sm {
     width: 100px;
     padding: .625rem 1.125rem;
     font-size: .875rem;
     line-height: 1.5;
     border-radius: .25rem;
 }

 .btn {
     display: inline-block;
     font-weight: 600;
     text-align: center;
     vertical-align: middle;
     transition: all .2s ease-in-out;
 }

 .btn:hover {
     background-color: #fff;
 }

 //  下拉菜单
 .menu {
     position: absolute;
   
 }


 // 内容模块

 .row {
     display: flex;
     flex-wrap: wrap;
     margin-right: -15px;
     margin-left: -1px;
 }

 // card
 .card {
     margin-top: -2rem;
     margin-bottom: 5rem;
     background-color: #fff;
     border: .0625rem solid rgba(231, 234, 243, .7);
     border-radius: .75rem;
     border-width: 0;
     box-shadow: 0 12px 15px rgba(140, 152, 164, .1);
 }

 .card-body {
     flex: 1 1 auto;
     min-height: 1px;
     padding: 1.5rem;
 }

 // 头像

 .avatar-circle .avatar-img {
     max-width: 100%;
     width: 112px;
     height: 112px;
     border-radius: 50%;
 }

 .card-title {
     font-weight: bold;
 }

 // nav
 .text-cap {
     display: block;
     text-transform: uppercase;
     font-weight: 600;
     letter-spacing: .03125rem;
 }

 .nav-tabs {
     border-bottom: .0625rem solid #e7eaf3;
     display: block;
 }

 .nav-tabs>li {
     float: none;
 }

 .nav-tabs .nav-item:first-child {
     margin-left: 0;
 }

 .navbar-vertical .nav-tabs .nav-item {
     margin: 0;
 }

 .nav-icon {
     width: 1.25rem;
     line-height: 1.4;
     opacity: .8;
     text-align: center;
     margin-right: .3rem;
 }

 .nav:not(.nav-pills) .nav-item.active .nav-link,
 .nav:not(.nav-pills) .nav-link.active {
     color: #377dff;
     border-left: 3px solid #377dff;
     margin-left: -17px;
     padding-left: 30px;
 }

 .nav-item {
     display: block;

 }

 .nav-item .nav-link {

     color: #333333;
 }

 .nav-item .nav-link:hover {
     background-color: transparent;
     border: 1px solid transparent;
     color: #377dff;
 }

 .nav-item .text-primary {
     text-align: center;
     border: 1px solid #377dff;
 }

 // 右边卡片
 .card-header:first-child {
     border-radius: .75rem .75rem 0 0;
     padding: 1.5rem 1.5rem;
     margin-bottom: 0;
     background-color: #fff;
     border-bottom: .0625rem solid rgba(231, 234, 243, .7);
 }

 // 头像
 .col-sm-9 .avatar-img {
     display: inline-block;
     width: 90px;
     height: 90px;
     vertical-align: middle;
 }

 // 更换头像
 .media-body {
     position: relative;
     width: 300px;
     display: inline-block;
     margin-top: 30px;
     margin-left: 30px;
 }

 .file-attachment-btn:hover {
     background-color: #377dff;
 }

 .file-attachment-btn-label {
     position: absolute;
     top: 0;
     right: 150px;
     width: 100%;
     height: 100%;
     cursor: inherit;
     opacity: 0;

 }

 .btn-white {
     font-weight: 400;
     background-color: #fff;
     border-color: #e7eaf3;
 }

 .btn-primary {
     color: #fff;
     background-color: #377dff;
     border-color: #377dff;
     margin-right: 10px;
     margin-left: 10px;
 }
//  媒体查询
@media screen and (max-width : 750px){
    .form-group{
        display: table;
        text-align: left;
    }
    .menu{
        right: 5rem;
        top: 3rem;
    }
}

 // 昵称
 .form-control {
     display: inline-block;
     width: 100%;
     height: calc(1.6em + 1.625rem);
     padding: .75rem 1rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.6;
     color: #1e2022;
     background-color: #fff;
     background-clip: padding-box;
     border: .0625rem solid #e7eaf3;
     border-radius: .3125rem;
     transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 }

 /* 性别 */

 .custom-control {
     position: relative;
     z-index: 1;
     display: block;
     min-height: 1.6rem;
     padding-left: 1.5rem;
 }

 .custom-control-label {
     position: relative;
     margin-bottom: 0;
     vertical-align: top;
 }

 /* footer */
 .card-footer:last-child {
     border-radius: 0 0 .75rem .75rem;
     margin-left: 10px;
 }

 .card-footer {
     position: relative;
     text-align: right;
     padding: 1.5rem 1.5rem;
     margin-right: 20px;
     background-color: #fff;
     border-top: .0625rem solid rgba(231, 234, 243, .7);
 }

 .card-footer .btn-primary:hover {
     background-color: #377dff;
 }